<template>
    <el-dialog v-model="addGoodsShow" title="新增商品"  width="30%" center>
        <el-form :model="goodsStore" :rules="rules" ref="dom" label-width="120px">
            <el-form-item label="商品条码" prop="code">
                <el-input v-model="goodsStore.code" style=" max-width: 250px;"/>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="goodsStore.goodsName" style=" max-width: 250px;"/>
            </el-form-item>
          <el-form-item label="零售价" prop="price">
            <el-input v-model="goodsStore.price" style=" max-width: 100px;"/>
            <el-button style="margin-left: 5%" type="primary" plain @click="getSuggestedPrice">建议价</el-button>
          </el-form-item>
          <el-form-item label="成本价" >
            <el-input v-model="goodsStore.cost" style=" max-width: 100px;"/>
          </el-form-item>
            <el-form-item label="初始库存" >
                <el-input v-model="goodsStore.inventory" style=" max-width: 100px;"/>
            </el-form-item>
            <el-form-item label="自定义库存预警" >
                <el-input v-model="goodsStore.warn" style=" max-width: 100px;"/>
            </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="addGoodsShow = false">取消</el-button>
        <el-button type="primary" @click="submit(dom)">
          新增
        </el-button>
      </span>
        </template>
    </el-dialog>
</template>

<script setup>


import {store} from "@/store";
import {onMounted, reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import request from "@/utils/request";

onMounted(()=>{
  setTimeout(()=>{
    goodsStore.storeId=store.getLocalCurrentStoreMain().storeId
  },1000)
})
const goodsStore=reactive({
  code:"",
  goodsName:"",
  storeId:0,
  inventory:0,
  cost:0.0,
  price:0.0,
  warn:3
})
let addGoodsShow=ref(false)
const dom = ref()
const emit = defineEmits(['confirmAdd'])
const show = () => {
  addGoodsShow.value=true
}
const validateCode = (rule, value) => {
  if (value.length !== 13)
    return Promise.reject("请输入正确的13位条形码")
  else
    return Promise.resolve()

}
const validatePrice = (rule, value) => {
  if (value<=0)
    return Promise.reject("价格必须大于0")
  else
    return Promise.resolve()

}
const rules = reactive({
  code:[{validator: validateCode, trigger: 'change',required:true}],
  price:[{validator: validatePrice, trigger: 'change',required:true}]
})

const getSuggestedPrice = () => {
  if (goodsStore.code.length!==13){
    ElMessage({
      message: "请输入正确的商品条码",
      type: 'warning',
    })
  }else {
    request.get("/goods/get/suggestedPrice/"+goodsStore.code).then(res=>{
      if (res.data!==null)
        goodsStore.price=res.data
      else
        ElMessage({
          message: "没有此商品的建议价",
          type: 'warning',
        })
    })
  }
}
const submit = (dom) => {
  dom.validate((isTrue) => {
    if (isTrue) {
      request.post("/goods/add/goodsStore", [goodsStore]).then(response => {
        if (response.code === 200) {
          emit("confirmAdd")
          addGoodsShow.value=false
        } else {
          console.log(response)
          ElMessage({
            message: response.message,
            type:'error'
          })
        }
      })
    } else {
      console.log("格式有误")
    }
  })
}

defineExpose({
  show,
})

</script>

<style scoped>

</style>